<template>
	<view >
		<view :class="[empty ? '' : 'padding-lr-sm']">
			<!-- 空白页 -->
			<use-empty v-if="empty" e-style="round" e-type="cart" :btn-tip="false" tip="无收货数据"></use-empty>
			<view class="padding bg-main border-radius margin-top-sm pos-r" @click="toDesc(item)" v-for="(item, idx) in datas" :key="idx">
				<view class="dflex-b">
					<view>
						<view class="fwb">商品编码:{{ item.commodityId  }}✖️{{item.quantity}}</view>
						<view v-if="item.expressNumber" class="ft-dark fs-xxs">快递单号:{{item.expressNumber}}({{item.expressCompany}})</view>
						<view  class="ft-dark fs-xxs">{{$api.format(item.createTime)}}</view>
					</view>
					<view class="dflex-c dflex-flow-c">
						<view v-if="item.status==1" class="bg-base border-radius" @click="confirmOrder(item)" style="padding: 6rpx 20rpx;">
							确认收货
						</view>
					</view>
				</view>
				<view class="bg-base fs-xxs pos-a pos-top pos-right" style="border-bottom-left-radius: 20rpx; padding: 2rpx 10rpx;">
					{{ zidian[item.status]}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {delivery_list,delivery_confirm} from "../../../js_sdk/apis/order.js"
	export default {
		data() {
			return {
				empty: false,
				state: '',
				zidian:{
					0:"申请" ,
					1:"配送中",
					2:"确认收货",
					3:"用户取消",
					4:"管理员取消"
				},
				datas: []
			};
		},
		onShow(options) {
			this.loadData();
		},
		methods: {
			toDesc(item){
				uni.navigateTo({
					url: `order-detail?tradeNo=${item.deliveryApplyId}&expressNumber=${item.expressNumber}&tradeType=3&commodityId=${item.commodityId}&quantity=${item.quantity}&createTime=${item.createTime}`
				})
			},
			confirmOrder(item){
				let {commodityId,deliveryApplyId,quantity} =item
				delivery_confirm({commodityId,deliveryApplyId,quantity}).then(res=>{
					this.$api.msg('已确认');
					this.loadData();
				})
			},
			loadData() {
				delivery_list({offset:1000}).then(res=>{
					this.datas=res.data&&res.data.content&&res.data.content.list
					this.empty = !(this.datas && this.datas.length > 0);
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}
	/* 订单状态区 */
	.navbar-area {
		white-space: nowrap;
	}
	
	.state-area {
		height: 7vh;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
	}
	
	.nav-item {
		flex: 1;
	
		&.active {
			&:after {
				content: '';
				position: absolute;
				left: 50%;
				transform: translate(-50%);
				bottom: 0;
				width: 44px;
				height: 0;
				border-bottom: 2px solid $base-color;
			}
		}
	}
	
</style>
